<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>为青春添彩 有你更精彩</title>
    <link href="css/index.css" rel="stylesheet" type="text/css">
    <script src="./js/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.min.js"></script>
    <script type="text/javascript" src="js/flexible.js"></script>

    <style>
        html,
        body {
            width: 100vw;
            min-height: 100vh;
            overflow-x: hidden;
        }

        label {
            font-size: .32rem;
            display: flex;
            align-items: center;
            color: #999999;
            margin: .733333rem 0rem .266667rem 0rem;
        }

        .confirm {
            margin-left: .133333rem;
        }
    </style>
</head>

<body>
    <div class="container8">
        <div class="headbg">
            <img src="./images/02.png" alt="" class="img02">
            <img src="./images/28.png" alt="">
        </div>
        <div class="section">
            <div class="content">
                <div class="out_container">
                    <div class="swiper-container video-box">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <video class="video1" controls="controls" muted
                                    src="https://media.html5media.info/video.mp4" webkit-playsinline="" playsinline=""
                                    x5-playsinline="" x-webkit-airplay="allow"
                                    style="width: 100%;height: 5.253333rem;; object-fit: fill;"></video>
                                <div class="posterBg">
                                    <img src="./images/27.png" alt="" class="img27">
                                    <img src="./images/21.png" style="width: 100%;height: 5.253333rem;" alt="" />
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <video class="video1" controls="controls" muted
                                    src="https://hs-website.oss-cn-beijing.aliyuncs.com/video/index_video1.mp4"
                                    webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow"
                                    style="width: 100%;height: 5.253333rem; object-fit: fill;"></video>
                                <div class="posterBg">
                                    <img src="./images/21.png" style="width: 100%;height: 5.253333rem;" alt="" />
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <video class="video1" controls="controls" muted
                                    src="https://hs-website.oss-cn-beijing.aliyuncs.com/video/index_video1.mp4"
                                    webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow"
                                    style="width: 100%;height: 5.253333rem;object-fit: fill;"></video>
                                <div class="posterBg">
                                    <img src="./images/21.png" style="width: 100%;height: 5.253333rem;" alt="" />
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <video class="video1" controls="controls" muted
                                    src="https://hs-website.oss-cn-beijing.aliyuncs.com/video/index_video1.mp4"
                                    webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow"
                                    style="width: 100%;height: 5.253333rem; object-fit: fill;"></video>
                                <div class="posterBg">
                                    <img src="./images/21.png" style="width: 100%;height: 5.253333rem;" alt="" />
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <video class="video1" controls="controls" muted
                                    src="https://hs-website.oss-cn-beijing.aliyuncs.com/video/index_video2.mp4"
                                    webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow"
                                    style="width: 100%;height: 5.253333rem;object-fit: fill;"></video>
                                <div class="posterBg">
                                    <img src="./images/21.png" style="width: 100%;height: 5.253333rem;" alt="" />
                                </div>
                            </div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="bg"></div>

                <div class="lists">
                    <div class="list">
                        <img src="./images/22.png" alt="" class="img22">
                        <div class="title">礼赞70年 筑梦新时代</div>
                        <a href="" class="detail">查看详情</a>
                    </div>
                    <div class="list">
                        <img src="./images/22.png" alt="" class="img22">
                        <div class="title">礼赞70年 筑梦新时代</div>
                        <a href="" class="detail">查看详情</a>
                    </div>
                    <div class="list">
                        <img src="./images/22.png" alt="" class="img22">
                        <div class="title">礼赞70年 筑梦新时代</div>
                        <a href="" class="detail">查看详情</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="btns">
            <a href="#">
                <button class="btn1">
                    返回顶部
                </button>
            </a>
           <a href="">
            <button class="btn2">
                返回首页
            </button>
           </a>
        </div>
    </div>
</body>
<script>
    var swipervideo = new Swiper('.video-box', {
        direction: 'horizontal',
        speed: 500,
        // autoplay:{
        //     delay:3000,
        // },
        loop: true,
        pagination: {
            el: '.video-box .swiper-pagination',
            clickable: true,
        },
        on: {
            init: function () {
                var flag = 0;
                var videoBor = $(".video-box .swiper-slide");//video的swiper对象数组
                var videolist = videoBor.find("video");//video对象数组
                videoBor.on("click", function () {
                    swipervideo.autoplay.stop();
                    var $video = $(this).find("video")[0];
                    if ($video.paused) {
                        var videoPoster = $(this).find(".posterBg");//当前封面对象
                        videoPoster.hide();
                        $video.play();
                    }
                });
                videolist.on("pause", function () {
                    /*所有封面浮层show&所有视频hide*/
                    console.log(2222222222222)
                    
                    videoBor.find(".posterBg").show();
                    videoBor.find("video").hide();
                });
                videolist.on("seeked ", function () {
                    console.log('11111111111')
                    flag = 1
                    setTimeout(() => {
                        flag = 0
                    }, 100);
                });
                videolist.on("play", function () {
                    console.log(33333333)
                    // if(flag == 1){
                    //     return
                    // }
                    /*当前视频show*/
                    $(this).show();
                    if ($(this)[0].play) {
                        swipervideo.autoplay.stop();
                    }
                });
                videoBor.find(".posterBg").show();
                videoBor.find("video").hide();
            },
            slideChange: function () {
                var videolist = $(".video-box .swiper-slide").find("video");//video对象数组
                for (var k = 0; k < videolist.length; k++) {
                    videolist[k].pause();
                }
            }
        }

    });

</script>

</html>